<template>
  <q-page class="bg-grey-2">
    <q-item class="bg-positive text-white">
      <q-item-section>
        <q-item-label class="text-h4">143.87</q-item-label>
        <q-item-label>
          <span>+2.50</span>
          <span class="q-ml-lg">+1.74%</span>
          <span class="q-ml-lg">融</span>
        </q-item-label>
      </q-item-section>
      <q-item-section class="text-white col-auto items-center">
        <q-btn
          dense
          flat
          stack
          icon="add_circle_outline"
          label="加自选"
        ></q-btn>
      </q-item-section>
    </q-item>
    <div
      class="bg-white relative-position row items-center q-py-md q-pl-md"
      v-ripple
    >
      <div class="col">
        <div class="row q-col-gutter-x-lg">
          <div class="col-4 flex justify-between">
            <div class="text-grey-6">今开</div>
            <div class="text-green">141.82</div>
          </div>
          <div class="col-4 flex justify-between">
            <div class="text-grey-6">换手</div>
            <div>4.91%</div>
          </div>
          <div class="col-4 flex justify-between">
            <div class="text-grey-6">总值</div>
            <div>141.82亿</div>
          </div>
        </div>
        <div class="row q-col-gutter-x-lg">
          <div class="col-4 flex justify-between">
            <div class="text-grey-6">最高</div>
            <div class="text-green">144.82</div>
          </div>
          <div class="col-4 flex justify-between">
            <div class="text-grey-6">换手</div>
            <div>4.91%</div>
          </div>
          <div class="col-4 flex justify-between">
            <div class="text-grey-6">总值</div>
            <div>141.82亿</div>
          </div>
        </div>
        <div class="row q-col-gutter-x-lg">
          <div class="col-4 flex justify-between">
            <div class="text-grey-6">最低</div>
            <div class="text-green">141.81</div>
          </div>
          <div class="col-4 flex justify-between">
            <div class="text-grey-6">换手</div>
            <div>4.91%</div>
          </div>
          <div class="col-4 flex justify-between">
            <div class="text-grey-6">总值</div>
            <div>141.82亿</div>
          </div>
        </div>
      </div>
      <div side class="col-auto">
        <q-icon name="chevron_right" color="grey-5" size="sm"></q-icon>
      </div>
    </div>
    <q-item dense class="q-px-xs bg-white q-mt-sm">
      <q-item-section>
        <q-tabs
          v-model="chartTab"
          align="left"
          shrink
          narrow-indicator
          dense
          active-color="negative"
        >
          <q-tab class="q-px-none" name="hour" label="分时" />
          <q-tab class="q-px-none" name="fiveDay" label="五日" />
          <q-tab class="q-px-none" name="dayK" label="日K" />
          <q-tab class="q-px-none" name="weekK" label="周K" />
          <q-tab class="q-px-none" name="monthK" label="月K" />
          <q-btn-dropdown
            auto-close
            dense
            stretch
            flat
            label="更多"
            class="custom-dropdown"
          >
            <q-list>
              <q-item clickable @click="chartTab = 'oneTime'">
                <q-item-section>1分</q-item-section>
              </q-item>
              <q-item clickable @click="chartTab = 'tooTime'">
                <q-item-section>5分</q-item-section>
              </q-item>
              <q-item clickable @click="chartTab = 'threeTime'">
                <q-item-section>10分</q-item-section>
              </q-item>
            </q-list>
          </q-btn-dropdown>
        </q-tabs>
      </q-item-section>
      <q-item-section side>
        <q-btn
          dense
          icon="settings_applications"
          unelevated
          @click="alertChartSetting = true"
        ></q-btn>
      </q-item-section>
    </q-item>
    <q-separator />
    <q-tab-panels v-model="chartTab">
      <q-tab-panel name="hour">
        <k-line class="bg-white"></k-line>
      </q-tab-panel>
      <q-tab-panel name="fiveDay">
        <k-line class="bg-white"></k-line>
      </q-tab-panel>
      <q-tab-panel name="dayK">
        <k-line class="bg-white"></k-line>
      </q-tab-panel>
      <q-tab-panel name="weekK">
        <k-line class="bg-white"></k-line>
      </q-tab-panel>
      <q-tab-panel name="monthK">
        <k-line class="bg-white"></k-line>
      </q-tab-panel>
      <q-tab-panel name="oneTime">
        <k-line class="bg-white"></k-line>
      </q-tab-panel>
      <q-tab-panel name="tooTime">
        <k-line class="bg-white"></k-line>
      </q-tab-panel>
      <q-tab-panel name="threeTime">
        <k-line class="bg-white"></k-line>
      </q-tab-panel>
    </q-tab-panels>

    <q-card square flat class="q-mt-sm">
      <q-tabs
        v-model="panelTab"
        dense
        indicator-color="negative"
        align="left"
        narrow-indicator
        :breakpoint="0"
      >
        <q-tab :ripple="false" name="profile" label="公司介绍" />
      </q-tabs>

      <q-separator />

      <q-tab-panels v-model="panelTab" animated>
        <q-tab-panel name="profile">
          <div class="text-weight-bolder text-subtitle1">基本资料</div>
          <div class="row q-py-xs">
            <div class="col-auto label">公司名称</div>
            <div class="col content">精科医疗科技股份有限公司</div>
          </div>
          <div class="row q-py-xs">
            <div class="col-auto label">曾用名</div>
            <div class="col content">--</div>
          </div>
          <div class="row q-py-xs">
            <div class="col row">
              <div class="col-auto label">A股代码</div>
              <div class="col content">300439</div>
            </div>
            <div class="col flex justify-between">
              <div class="label">A股简称</div>
              <div class="content">精科医疗</div>
            </div>
          </div>
          <div class="row q-py-xs">
            <div class="col-auto label">所属区域</div>
            <div class="col content">河南</div>
          </div>
          <div class="row q-py-xs">
            <div class="col-auto label">所属行业</div>
            <div class="col content">金融是货币资金融通的总称</div>
          </div>
          <div class="row q-py-xs">
            <div class="col-auto label">所属概念</div>
            <div class="col content">
              金融是货币资金融通的总称。主要指与货币流通和银行信用相关的各种活动。主要内容包括：货币的发行、投放、流通和回笼；
            </div>
          </div>
          <div class="row q-py-xs">
            <div class="col row">
              <div class="col-auto label">董事长</div>
              <div class="col content">金融是</div>
            </div>
            <div class="col flex justify-between">
              <div class="label">法人代表</div>
              <div class="content">金融是</div>
            </div>
          </div>
          <div class="row q-py-xs">
            <div class="col row">
              <div class="col-auto label">成立日期</div>
              <div class="col content">2014-09-18</div>
            </div>
            <div class="col flex justify-between">
              <div class="label">注册资本(元)</div>
              <div class="content">4.474亿</div>
            </div>
          </div>
          <div class="row q-py-xs">
            <div class="col-auto label">联系电话</div>
            <div class="col content">0374-00000000</div>
          </div>
          <div class="row q-py-xs">
            <div class="col-auto label">公司邮箱</div>
            <div class="col content">ss@wedfg.com</div>
          </div>
          <div class="row q-py-xs">
            <div class="col-auto label">办公地址</div>
            <div class="col content">河南省郑州市管城回族区商鼎路39号</div>
          </div>
          <div class="row q-py-xs">
            <div class="col-auto label">注册地址</div>
            <div class="col content">河南省郑州市管城回族区商鼎路39号</div>
          </div>
          <div class="row q-py-xs">
            <div class="col-auto label">公司简介</div>
            <div class="col content">
              <ellipsis-text :max-line="3" btn-color="negative">
                金融是货币资金融通的总称。主要指与货币流通和银行信用相关的各种活动。主要内容包括：货币的发行、投放、流通和回笼；
                金融是货币资金融通的总称。主要指与货币流通和银行信用相关的各种活动。主要内容包括：货币的发行、投放、流通和回笼；
              </ellipsis-text>
            </div>
          </div>
          <div class="text-weight-bolder text-subtitle1 q-mt-md">发行相关</div>
          <div class="row q-py-xs">
            <div class="col row">
              <div class="col-auto label">上市日期</div>
              <div class="col content">2014-09-18</div>
            </div>
            <div class="col flex justify-between">
              <div class="label">发行量(股)</div>
              <div class="content">4560万</div>
            </div>
          </div>
          <div class="row q-py-xs">
            <div class="col row">
              <div class="col-auto label">发行价格</div>
              <div class="col content">26.62</div>
            </div>
            <div class="col flex justify-between">
              <div class="label">募资净额(元)</div>
              <div class="content">11.01亿</div>
            </div>
          </div>
          <div class="row q-py-xs">
            <div class="col row">
              <div class="col-auto label">发行市盈率</div>
              <div class="col content">58.62</div>
            </div>
            <div class="col flex justify-between">
              <div class="label">网上中签率</div>
              <div class="content">0.05%</div>
            </div>
          </div>
          <div class="row q-py-xs">
            <div class="col row">
              <div class="col-auto label">证券类型</div>
              <div class="col content">股票</div>
            </div>
            <div class="col flex justify-between">
              <div class="label">超额配售占比</div>
              <div class="content">--</div>
            </div>
          </div>
        </q-tab-panel>
      </q-tab-panels>
    </q-card>
    <edit-chart-config v-model="alertChartSetting"></edit-chart-config>
  </q-page>
</template>

<script>
import { defineComponent } from "vue";

import KLine from "components/ECharts/KLine";
import EllipsisText from "components/EllipsisText";
import EditChartConfig from "components/dialog/EditChartConfig";

export default defineComponent({
  name: "PageQuotationDetailed",
  components: {
    KLine,
    EllipsisText,
    EditChartConfig,
  },
  data() {
    return {
      chartTab: "hour",
      panelTab: "profile",
      alertChartSetting: false,
    };
  },
});
</script>

<style lang="sass">
.custom-dropdown
  margin-left: 2px

.custom-dropdown .q-btn-dropdown__arrow
  margin-left: 2px
  width: .5em
</style>

<style scoped>
.label {
  width: 74px !important;
  color: #888888;
  white-space: nowrap;
}
</style>
